<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+ 2</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
			var gentry = null,
				hl = null,
				le = null;
			var er = null,
				ep = null;
			var bUpdated = false; //用于兼容可能提前注入导致DOM未解析完更新的问题
			// H5 plus事件处理
			function plusReady() {
				// 获取音频目录对象
				plus.io.resolveLocalFileSystemURL('_doc/', function(entry) {
					entry.getDirectory('audio', {
						create: true
					}, function(dir) {
						gentry = dir;
						updateHistory();
					}, function(e) {
						outSet('Get directory "audio" failed: ' + e.message);
					});
				}, function(e) {
					outSet('Resolve "_doc/" failed: ' + e.message);
				});
			}
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}
			// DOMContentLoaded事件处理
			document.addEventListener('DOMContentLoaded', function() {
				// 获取DOM元素对象
				hl = document.getElementById('history');
				le = document.getElementById('empty');
				er = document.getElementById('record');
				rt = document.getElementById('rtime');
				ep = document.getElementById('play');
				pt = document.getElementById('ptime');
				pp = document.getElementById('progress')
				ps = document.getElementById('schedule');
				updateHistory();
			}, false);
			// 添加播放项
			function createItem(entry) {
				var li = document.createElement('li');
				li.className = 'ditem';
				li.innerHTML = '<span class="iplay"><font class="aname"></font><br/><font class="ainf"></font></span>';
				li.setAttribute('onclick', 'playAudio(this)');
				hl.insertBefore(li, le.nextSibling);
				li.querySelector('.aname').innerText = entry.name;
				li.querySelector('.ainf').innerText = '...';
				li.entry = entry;
				updateInformation(li);
				// 设置空项不可见
				le.style.display = 'none';
			}
			// 开始录音
			var r = null,
				t = 0,
				ri = null,
				rt = null;

			function startRecord() {
				outSet('开始录音：');
				r = plus.audio.getRecorder();
				if(r == null) {
					outLine('录音对象未获取');
					return;
				}
				r.record({
					filename: '_doc/audio/'
				}, function(p) {
					outLine('录音完成：' + p);
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						createItem(entry);
					}, function(e) {
						outLine('读取录音文件错误：' + e.message);
					});
				}, function(e) {
					outLine('录音失败：' + e.message);
				});
				er.style.display = 'block';
				t = 0;
				ri = setInterval(function() {
					t++;
					rt.innerText = timeToStr(t);
				}, 1000);
			}
			// 停止录音
			function stopRecord() {
				er.style.display = 'none';
				rt.innerText = '00:00:00';
				clearInterval(ri);
				ri = null;
				r.stop();
				w = null;
				r = null;
				t = 0;
			}
			// 清除历史记录
			function cleanHistory() {
				hl.innerHTML = '<li id="empty" class="ditem-empty">无历史记录</li>';
				le = document.getElementById('empty');
				// 删除音频文件
				outSet('清空录音历史记录：');
				gentry.removeRecursively(function() {
					// Success
					outLine('操作成功！');
				}, function(e) {
					ouline('操作失败：' + e.message);
				});
			}
			// 获取录音历史列表
			function updateHistory() {
				if(bUpdated || !gentry || !document.body) { //兼容可能提前注入导致DOM未解析完更新的问题
					return;
				}
				var reader = gentry.createReader();
				reader.readEntries(function(entries) {
					for(var i in entries) {
						if(entries[i].isFile) {
							createItem(entries[i]);
						}
					}
				}, function(e) {
					outLine('读取录音列表失败：' + e.message);
				});
				bUpdated = true;
			}
			// 获取录音文件信息
			function updateInformation(li) {
				if(!li || !li.entry) {
					return;
				}
				var entry = li.entry;
				entry.getMetadata(function(metadata) {
					li.querySelector('.ainf').innerText = dateToStr(metadata.modificationTime);
				}, function(e) {
					outLine('获取文件"' + entry.name + '"信息失败：' + e.message);
				});
			}
			// 播放音频文件
			function playAudio(li) {
				if(!li || !li.entry) {
					ouSet('无效的音频文件');
					return;
				}
				outSet('播放音频文件：' + li.entry.name);
				startPlay('_doc/audio/' + li.entry.name);
			}
			// 播放文件相关对象
			var p = null,
				pt = null,
				pp = null,
				ps = null,
				pi = null;
			// 开始播放
			function startPlay(url) {
				ep.style.display = 'block';
				var L = pp.clientWidth;
				p = plus.audio.createPlayer(url);
				p.play(function() {
					outLine('播放完成！');
					// 播放完成
					pt.innerText = timeToStr(d) + '/' + timeToStr(d);
					ps.style.webkitTransition = 'all 0.3s linear';
					ps.style.width = L + 'px';
					stopPlay();
				}, function(e) {
					outLine('播放音频文件"' + url + '"失败：' + e.message);
				});
				// 获取总时长
				var d = p.getDuration();
				if(!d) {
					pt.innerText = '00:00:00/' + timeToStr(d);
				}
				pi = setInterval(function() {
					if(!d) { // 兼容无法及时获取总时长的情况
						d = p.getDuration();
					}
					var c = p.getPosition();
					if(!c) { // 兼容无法及时获取当前播放位置的情况
						return;
					}
					pt.innerText = timeToStr(c) + '/' + timeToStr(d);
					var pct = Math.round(L * c / d);
					if(pct < 8) {
						pct = 8;
					}
					ps.style.width = pct + 'px';
				}, 1000);
			}
			// 停止播放
			function stopPlay() {
				clearInterval(pi);

				function startPlay(url) {
					ep.style.display = 'block';
					var L = pp.clientWidth;
					p = plus.audio.createPlayer(url);
					p.play(function() {
						outLine('播放完成！');
						// 播放完成
						pt.innerText = timeToStr(d) + '/' + timeToStr(d);
						ps.style.webkitTransition = 'all 0.3s linear';
						ps.style.width = L + 'px';
						stopPlay();
					}, function(e) {
						outLine('播放音频文件"' + url + '"失败：' + e.message);
					});
					// 获取总时长
					var d = p.getDuration();
					if(!d) {
						pt.innerText = '00:00:00/' + timeToStr(d);
					}
					pi = setInterval(function() {
						if(!d) { // 兼容无法及时获取总时长的情况
							d = p.getDuration();
						}
						var c = p.getPosition();
						if(!c) { // 兼容无法及时获取当前播放位置的情况
							return;
						}
						pt.innerText = timeToStr(c) + '/' + timeToStr(d);
						var pct = Math.round(L * c / d);
						if(pct < 8) {
							pct = 8;
						}
						ps.style.width = pct + 'px';
					}, 1000);
				}
				pi = null;
				setTimeout(resetPlay, 500);
				// 操作播放对象
				if(p) {
					p.stop();
					p = null;
				}
			}
			// 重置播放页面内容
			function resetPlay() {
				ep.style.display = 'none';
				ps.style.width = '8px';
				ps.style.webkitTransition = 'all 1s linear';
				pt.innerText = '00:00:00/00:00:00';
			}
			// 重写关闭
			var _back = window.back;

			function resetback() {
				// 停止播放
				if(ep.style.display == 'block') {
					stopPlay();
				} else if(er.style.display == 'block') {
					stopRecord();
				} else {
					_back();
				}
			}
			window.back = resetback;
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />
		<style type="text/css">
			.rp {
				width: 100%;
				height: 100%;
				display: none;
				text-align: center;
				position: fixed;
				top: 0;
				background: rgba(0, 0, 0, 0.8);
				z-index: 9999;
				overflow: hidden;
			}
			
			.aname {
				font-size: 16px;
			}
			
			.ainf {
				font-size: 12px;
			}
			
			.rtime {
				font-size: 22px;
				color: #FF0000;
			}
			
			.ptime {
				margin-top: 40%;
				font-size: 22px;
				color: #FFFFFF;
			}
			
			.rprogress {
				background: url(../img/arecord.png) no-repeat center center;
				background-size: 32px 32px;
			}
			
			.rschedule {
				background-color: rgba(0, 0, 0, 0);
				border: 5px solid rgba(0, 183, 229, 0.9);
				opacity: .9;
				border-left: 5px solid rgba(0, 0, 0, 0);
				border-right: 5px solid rgba(0, 0, 0, 0);
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 36px;
				height: 36px;
				margin: 0 auto;
				-webkit-animation: spin 1s infinite linear;
				animation: spin 1s infinite linear;
			}
			
			@-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
			
			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			
			.progress {
				width: 90%;
				background-color: #666;
				margin: 0 5%;
				border: 1px solid #222;
				-webkit-border-radius: 5px;
				border-radius: 5px;
			}
			
			.schedule {
				width: 8px;
				height: 8px;
				margin: 1px 0;
				background-color: #FFCC33;
				-webkit-border-radius: 4px;
				border-radius: 4px;
				-webkit-transition: all 1s linear;
				transition: all 1s linear;
			}
			
			.stop {
				width: 72px;
				height: 72px;
				background: url(../img/astop.png) center center;
				background-size: 72px 72px;
				margin: auto;
				-webkit-border-radius: 72px;
				border-radius: 72px;
			}
			
			.stop:active {
				-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
				box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
			}
			
			.iplay {
				display: block;
				background: no-repeat right center url();
				background-size: 50px 44px;
				-ms-touch-action: auto;
			}
		</style>
	</head>

	<body>
		<header id="header">
			<div class="nvbt iback" onclick="back()"></div>
			<div class="nvtt">Audio</div>
			<div class="nvbt idoc" onclick="openDoc('Audio Document','/doc/audio.html')"></div>
		</header>
		<div id="dcontent" class="dcontent">
			<br/>
			<div class="button" onclick="startRecord()">开始录音</div>
			<div class="button" onclick="startPlay('_www/audio/friendship.mp3')">播放音乐</div>
			<br/>
			<!-- History list -->
			<ul id="history" class="dlist" style="text-align:left;">
				<li id="empty" class="ditem-empty">无历史记录</li>
			</ul>
			<br/>
			<div class="button button-waring" onclick="cleanHistory()">清空历史记录</div>
			<br/>
		</div>
		<div id="output">
			Audio用于管理音频设备，可调用麦克风录制音频文件，也可播放音频文件。
		</div>
		<div id="play" class="rp">
			<div id="ptime" class="ptime">00:00:00/00:00:00</div><br/>
			<div id="progress" class="progress">
				<div id="schedule" class="schedule"></div>
			</div>
			<br/>
			<div class="stop" onclick="stopPlay(),outSet('停止播放！')"></div>
		</div>
		<div id="record" class="rp">
			<div style="width:100%;height:20%;"></div>
			<div class="rprogress">
				<div class="rschedule"></div>
			</div>
			<br/>
			<div id="rtime" class="rtime">00:00:00</div><br/>
			<div class="stop" onclick="stopRecord()"></div>
		</div>
	</body>
	<script type="text/javascript" src="../js/immersed.js"></script>

</html>